<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            width: 100px;
            height: 100px;
            border:10px solid #f00283;
        }
        .top1{
            width: 100px;
            height: 100px;
            border:10px solid #f00283;
            border-color:#000 #aaa #333 #999;
        }
        .top2{
            width: 10px;
            height: 10px;
            border:10px solid #f00283;
            border-color:#000 #aaa #333 #999;
        }
        .top3{
            width: 0px;
            height: 0px;
            border:40px solid #f00283;
            border-color:#000 #aaa #333 #999;
        }
        .top4{
            width: 0px;
            height: 0px;
            border:40px solid #f00283;
            border-color:transparent transparent #333 transparent;
        }

        .top5{
            width: 0px;
            height: 0px;
            border-width: 100px 50px;
            border-style: solid;
            border-color:transparent transparent #333 transparent;
        }

        .top6{
            width: 0px;
            height: 0px;
            border-width: 100px 50px 50px 50px;
            border-style: solid;
            border-color:#000 #aaa #333 #999;
        }
        .module {
            clip-path: polygon(0 0, 100% 100%, 100% 0);
        }
        .bg {
            background-image: linear-gradient(-180deg, #dbd5ff 0%, #ffffff 100%);
        }
        .middlebox {
            flex: 1;
            border-radius: 6px 0 0 0;
        }
    </style>
</head>
<body>
    <!-- https://mp.weixin.qq.com/s/8vcrfzh5J5aSRGSPRwFASQ -->
    <div class="top">

    </div>
    <div>根据第一，看第二，看第三</div>
    <div class="top1">

    </div>
    <div class="top2">

    </div>
    <div class="top3">

    </div>
    <div class="top4">

    </div>
    <div class="top5">

    </div>
    <div class="top6">

    </div>
    <div style="display:flex;margin-top:20px;">
        <div
          style="background-image: linear-gradient(-180deg, #CEAFFF 0%, #958BFF 100%);flex:1;border-radius:6px; display:flex;align-items: center;padding-left:12px;color:#fff;font-size:17px;"
        >
          1
        </div>
        <div style="display:flex;flex:6;margin-top:-5px;margin-left:-15%;padding-left:20px;">
          <div class="module middlebox bg"></div>
          <div class="tips bg">dfgsfgsfgsf</div>
        </div>
      </div>
</body>
</html>